<template>
  <el-tooltip :content="tips" :effect="$store.getters.tipTheme" placement="right">
    <img :src="lockUrl" alt="" @click="lockChangeState">
  </el-tooltip>
</template>

<script>
import locked from '../assets/locked.png'
import unlock from '../assets/unlock.png'
import {mapState} from "vuex";
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Lock",
  data() {
    return {
      locked: locked,
      unlock: unlock,
    }
  },
  computed: {
    ...mapState(['isImgLockedList', 'currentIndex']),
    isLocked() {
      return this.isImgLockedList[this.currentIndex]
    },
    lockUrl() {
      return this.isLocked ? locked : unlock
    },
    tips() {
      return this.isLocked ? '解锁当前图片' : '锁定当前图片，下次抽卡保底有它'
    }
  },
  methods: {
    lockChangeState() {
      this.$set(this.$store.state.isImgLockedList, this.currentIndex, !this.isLocked);
    }
  }
}
</script>

<style scoped>
  img {
    position: absolute;
    top: 80px;
    left: 260px;
    width: 50px;
    cursor: pointer;
  }
</style>